<template>
	<root-portal v-if="show">
		<view class="previewimages-box" @click="closePreview" @touchstart="touchStart" @touchend="touchEnd">
			<swiper indicator-dots class="swiper-box" indicator-active-color="#fff" :current="current" indicator-color="#999"
				@change="swiperChange">
				<swiper-item v-for="(item,idx) in imagesList" :key="idx" :item-id="idx">
					<movable-area class="swiper-item" scale-area>
						<movable-view class="movable-view" direction="all" :damping="100" scale :scale-min="1" :scale-max="5"
							:scale-value="1">
							<scroll-view class="img-scroll-view" scroll-y :show-scrollbar="false" enhanced bounces>
								<view class="scroll-view" :style="{alignItems: item.longImage ? 'flex-start' : 'center'}">
									<image class="img" :src="item.url" lazy-load mode="widthFix" @load="imageLoad($event,idx)">
									</image>
								</view>
							</scroll-view>
						</movable-view>
					</movable-area>
				</swiper-item>
			</swiper>
		</view>
	</root-portal>
</template>
<script>
	const systemInfo = uni.getSystemInfoSync()
	export default {
		data() {
			return {
				// 是否展示图片预览
				show: false,
				// 当前预览的图片索引
				current: 0,
				// 是否处于触摸状态
				scaleing: false,
				// 展示的图片列表
				imagesList: []
			}
		},
		methods: {
			/**
			 * 展示图片
			 * @param {object} 
			 * @param {Number} current 当前展示的图片索引
			 * @param {Array} urls	   展示的图片列表
			 */
			previewImages({
				current = 0,
				urls = []
			}) {
				if (urls && urls.length) {
					this.current = current
					this.imagesList = urls.map(url => {
						return {
							// 是否是长图
							longImage: false,
							url
						}
					})
					this.show = true
				} else {
					console.error('previewImages --->>> urls 参数错误')
				}
			},
			/**
			 * 关闭展示窗口
			 */
			closePreview() {
				if (!this.scaleing) {
					this.show = false
					this.current = 0
				}
			},
			/**
			 * 轮播图滚动
			 */
			swiperChange({
				detail
			}) {
				this.current = detail.current;
			},
			/**
			 * 手指触摸开始
			 */
			touchStart() {
				setTimeout(() => {
					this.scaleing = true;
				}, 300)
			},
			/**
			 * 手指触摸结束
			 */
			touchEnd() {
				setTimeout(() => {
					this.scaleing = false;
				}, 500)
			},
			/**
			 * 图片加载完成是判断是否是长图
			 */
			imageLoad({
				detail
			}, idx) {
				const {
					screenHeight
				} = systemInfo
				const h = 720 / detail.width * detail.height
				this.imagesList[idx].longImage = !!(h > screenHeight)
			}
		}
	}
</script>
<style scoped lang="scss">
	.previewimages-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		margin: auto;
		z-index: 999;

		.swiper-box {
			width: 100%;
			height: 100vh;

			.swiper-item {
				width: 100%;
				height: 100%;
				overflow-x: hidden;
				overflow-y: scroll;
				display: flex;
				align-items: center;
				justify-content: center;

				.movable-view {
					width: 100%;
					height: 100%;

					.img-scroll-view {
						width: 100%;
						height: 100%;
					}

					.scroll-view {
						display: flex;
						justify-content: center;
						min-height: 100vh;
						width: 750rpx;

						.img {
							width: 720rpx;
							height: auto;
						}
					}
				}
			}
		}
	}
</style>